<template>
  <el-card v-loading="loadingInfo">
    <template #header>
      <el-tabs v-model="viewBoard">
        <el-tab-pane label="详情" name="info">
          <el-table
            v-if="orderInfo.OrderInfo"
            :header-cell-style="handleHeaderStyle"
            :data="new Array(1).fill({ name: 1 })"
          >
            <el-table-column prop="name">
              <template #header>
                <span style="margin-right: 10px">
                  <b>订单编号：</b>{{ orderInfo.OrderInfo.OrderCode }}
                </span>
                <el-tag
                  style="margin-right: 10px"
                  v-if="orderInfo.OrderInfo.GateType"
                  type="primary"
                  >{{ orderInfo.OrderInfo.GateType }}</el-tag
                >
                <span style="color: gray"
                  ><b>客户：</b>{{ orderInfo.OrderInfo.CustomerName }}</span
                >
              </template>
              <el-table-column>
                <template v-slot>
                  <div style="display: flex">
                    <el-image
                      style="width: 100px; height: 100px; margin: 1px"
                      v-for="(item, index) in orderInfo.PictureList"
                      :key="index"
                      :src="item.PictureUrl"
                      :preview-src-list="
                        orderInfo.PictureList.map((item) => item.PictureUrl)
                      "
                    ></el-image>
                    <el-empty
                      v-if="orderInfo.PictureList.length == 0"
                      :image-size="40"
                      style="height: 50px"
                      description="暂无图片"
                    ></el-empty>
                  </div>
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot>
                  <span> 樘数：{{ orderInfo.OrderInfo.Count1 }} </span>
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot>
                  <span>订单金额：￥{{ orderInfo.OrderInfo.OrderMoney }}</span>
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot>
                  <span>创建日期：{{ orderInfo.OrderInfo.CreateTime }}</span>
                </template>
              </el-table-column>
              <el-table-column>
                <template v-slot>
                  <span>发货日期：{{ orderInfo.OrderInfo.DeliveryTime }}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <div class="table-separator">客户信息</div>
          <el-descriptions
            size="small"
            :column="4"
            border
            v-if="orderInfo.OrderInfo"
          >
            <template v-for="(item, key) in customerKeys" :key="key">
              <el-descriptions-item
                :label="item"
                align="left"
                width="100"
              >
                <div style="display: flex; justify-content: space-between">
                  {{ orderInfo.OrderInfo[key] || "-" }}
                  <!-- <div
                    style="
                      border: 1px solid red;
                      color: red;
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      text-align: center;
                      line-height: 20px;
                      cursor: pointer;
                    "
                  >
                    改
                  </div> -->
                </div>
              </el-descriptions-item>
            </template>
          </el-descriptions>
          <div class="table-separator">订单信息</div>
          <el-descriptions
            size="small"
            :column="4"
            border
            v-if="orderInfo.OrderInfo"
          >
            <template v-for="(item, key) in showKeys" :key="key">
              <el-descriptions-item
                v-if="key == 'RemarkView'"
                :label="item"
                align="left"
                width="100"
              >
                <div v-html="orderInfo.OrderInfo[key]"></div>
              </el-descriptions-item>
              <el-descriptions-item
                v-else-if="key == 'nField'"
                :label="item"
                align="left"
                width="100"
                span="1"
              >
                <div style="font-size: 15px">
                  {{ orderInfo.OrderInfo[key] }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item
                v-else
                :label="item"
                align="left"
                width="100"
              >
                <div style="display: flex; justify-content: space-between">
                  {{ orderInfo.OrderInfo[key] || "-" }}
                  <!-- <div
                    style="
                      border: 1px solid red;
                      color: red;
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      text-align: center;
                      line-height: 20px;
                      cursor: pointer;
                    "
                  >
                    改
                  </div> -->
                </div>
              </el-descriptions-item>
            </template>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="订单日志" name="log">
          <el-descriptions
            size="small"
            direction="vertical"
            :column="orderInfo.Produces.length"
            border
            v-if="orderInfo.OrderInfo"
          >
            <el-descriptions-item
              v-for="(item, proIndex) in orderInfo.Produces"
              :key="proIndex"
            >
              <template #label>
                <span style="margin-right: 20px; font-size: 14px">
                  {{ `生产任务 ${circleNum(proIndex + 1)}` }}
                </span>
                <el-tag
                  :type="item.IsFinish ? 'success' : 'warning'"
                  effect="dark"
                  round
                  >{{ item.IsFinish ? "已完成" : "未完成" }}</el-tag
                >
              </template>
              <div class="produce-box" style="display: flex; font-size: 14px">
                <p>生产编号：{{ item.ProduceCode }}</p>
                <p>开始时间： {{ item.ProcessStartTime }}</p>
                <p>结束时间：{{ item.FinishTime }}</p>
              </div>
              <!-- <el-descriptions size="small" :column="4" border>
                <template v-for="(keyValue, key) in produceShowKeys" :key="key">
                  <el-descriptions-item
                    v-if="key == 'RemarkView'"
                    :label="keyValue"
                    align="left"
                    width="100"
                  >
                    <div v-html="item[key]"></div>
                  </el-descriptions-item>
                  <el-descriptions-item
                    v-else
                    :label="keyValue"
                    align="left"
                    width="100"
                  >
                    <div style="display: flex; justify-content: space-between">
                      {{ item[key] || "-" }}
                    </div>
                  </el-descriptions-item>
                </template>
              </el-descriptions> -->
              <el-timeline style="margin: 10px">
                <el-timeline-item
                  v-for="(activity, index) in item.TrackList"
                  :key="index"
                  type="primary"
                  :color="'#0bbd87'"
                  :icon="'check'"
                  hollow
                  :timestamp="timeStampFormatter(activity.CreateTime)"
                  placement="top"
                >
                  <template #dot>
                    <el-icon
                      style="
                        border-radius: 50%;
                        background: #0bbd87;
                        color: #fff;
                        transform: translateX(-20%);
                      "
                      size="20"
                      ><CircleCheck
                    /></el-icon>
                  </template>
                  <el-card>
                    <h3 style="font-weight: 900">{{ activity.ProcessName }}</h3>
                    <div v-show="activity.UserName">
                      <el-icon><User /></el-icon>
                      <span style="vertical-align: 0.1em">
                        {{ activity.UserName }}
                      </span>
                    </div>
                    <div v-if="!!activity.SubCustomerName">
                      子客户： {{ activity.SubCustomerName }}
                    </div>
                    <div v-show="activity.Remark">
                      备注： {{ activity.Remark }}
                    </div>
                    <div v-show="activity.Status">
                      状态： {{ activity.Status }}
                    </div>
                    <div v-show="activity.StatusName">
                      状态名称： {{ activity.StatusName }}
                    </div>
                    <div v-show="activity.StockArea">
                      仓储位置： {{ activity.StockArea }}
                    </div>
                    <div v-show="activity.SamplePicture">
                      <h6>缩略图</h6>
                      <el-image
                        style="width: 100px; height: 100px; margin: 1px"
                        :preview-src-list="[activity.SamplePicture]"
                        :src="activity.SamplePicture"
                      ></el-image>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="讨论备注" name="remark">
          <template v-if="orderInfo.OrderInfo">
            <p>总备注：{{ orderInfo.OrderInfo.Remark || "-" }}</p>
            <p>订单：{{ orderInfo.OrderInfo.OrderRemark || "-" }}</p>
            <p>
              动态备注：
              <el-card style="width: 400px; margin-top: 10px">
                <div v-html="orderInfo.OrderInfo.RemarkView"></div>
              </el-card>
            </p>
            <p>用户输入备注：{{ orderInfo.OrderInfo.InputRemark || "-" }}</p>
          </template>
        </el-tab-pane>
      </el-tabs>
    </template>
  </el-card>
</template>
<script setup>
import { onMounted } from "vue";
import { orderInfoApi } from "../../../../api/order/list";
import { timeStampFormatter } from "../../../../utils";
import { Check, CircleCheck, User } from "@element-plus/icons-vue";
const route = useRoute();
const viewBoard = ref("info");
const orderInfo = ref({});
const loadingInfo = ref(false);
const customerKeys = {
  CustomerName: "客户名称",
  // 代理品牌
  // 注册手机
  // \/ \/
  Field7: '子客户',
  Field13: '工艺厚度',
  // 工艺名称
  Field4: '门体总高',
  Field5: '门体总宽',
  Field6: '主门高度',
  Field6: '主门高度',
  Field10: '墙体厚度',
  Field3: '开向',
  Field8: '包边名称',
  // 花边名称
  // 主外款式
  // 主内款式
  // 副外款式
  // 副内款式
  // 子外款式
  // 子内款式
  // 边外款式
  // 边内款式
  // 门面外玻
  // 门面内玻
  // 室外颜色
  // 室内颜色
  // 门框颜色
  // 外门面材料
  // 内门面材料
  // 门框材料
  // 锁具名称
  // 拉手名称
  Field11: '气窗款式',
  Field12: '气窗工艺',
  // 气窗外玻
  // 气窗内玻
  // 下档材料
  // 下档类型 
  // 下档高度 
  // 门头
  // 门柱
  // 门头安装位置
  // 锁芯名称
  // 室内拉手
  // 插销名称
  // 铰链名称
  // 铰链个数
  // 猫铃名称
  // 闭门器
  // 顺位器
  // 包装要求
  // 门头要求
  // \/ \/

  //  门型,颜色,开向,门总高,门总宽,门高,子客户,包边,拉手,墙厚,气窗工艺,气窗款式,工艺厚度,要求一,要求二, 对应数据依次在Field1~Field30里
}
const priceKeys = {
  // 下单数量
  // 单价
  // 结算方式
  // 平方
  // 锁具金额
  // 花边金额
  // 锁芯金额
  // 玻璃金额
  // 墙体金额
  // 包装金额
  // 其他金额
  // 拉手金额
  // 门头金额
  // 折扣
  // 改单金额
  // 合计金额
  // 结算金额
  // 贷款明细
  // 备注
}

const showKeys = {
  Color: "颜色",
  CompanyName: "公司名称",
  CountAttrs: "属性数量",
  Deleted: "是否删除",
  DoorLeafBarCode: "门叶柱编号",
  DoorLeafSize: "门叶尺寸",
  DoorPocketBarCode: "口袋门柱编号",
  DoorPocketRequire: "口袋门需求",
  DoorPocketSize: "口袋门尺寸",
  DoorPocketType: "口袋门类型",
  DoorwaySize: "门道尺寸",
  FinishTime: "完成时间",
  GateType: "门类型",
  InputRemark: "用户输入备注",
  IsCancelOver: "是否取消",
  IsFinish: "是否已完成",
  IsOrderOverTime: "订单是否超时",
  IsOverTime: "是否超时",
  IsReturn: "是否交还",
  IsShow: "是否展示",
  LatestTrackInfo: "最新工序信息",
  LeafCount: "门叶数量",
  LineCount: "门线数量",
  LineType: "门线类型",
  Mark: "标记",
  MaterialQuality: "材料质量",
  Mobile: "风铃",
  NonTrackList: "无工序列表",
  OMarkDescription: "标记描述",
  OMarkStatus: "标记状态",
  OMarkStatusName: "标记状态名",
  OrderClerkName: "订单接单人",
  OrderRemark: "订单备注",
  OrderTime: "接单时间",
  OverTimeName: "超时名称",
  PieceCount: "碎片数量",
  PocketCount: "门袋数量",
  ProduceCode: "生产编号",
  QuantityUnit: "质量单位",
  Remark: "备注",
  RemarkView: "动态备注",
  SalesmanName: "订单销售员",
  SamplePicture: "订单缩略图",
  Status: "订单状态",
  StatusName: "状态名称",
  SubCustomerName: "子客户名称",
  Technique: "技术",
  TotalDays: "总用时（天）",
  TrackList: "工序进度",
  Type: "系列",
  Urgent: "是否加急",
  Veneer: "胶合板",
  nField: "自定义属性",
};
// const produceShowKeys = Object.assign({}, showKeys);
// delete produceShowKeys.TrackList;
// delete produceShowKeys.FinishTime;
// delete produceShowKeys.IsFinish;
onMounted(async () => {
  if (route.query.id) {
    let res = await orderInfoApi(route.query.id);
    loadingInfo.value = true;
    if (res.IsSuccess) {
      orderInfo.value = res;
    }
    orderInfo.value.OrderInfo.nField = "";
    let str = "";
    for (let key in orderInfo.value.OrderInfo) {
      if (String(orderInfo.value.OrderInfo[key]).includes("Date(")) {
        orderInfo.value.OrderInfo[key] = timeStampFormatter(
          orderInfo.value.OrderInfo[key]
        );
      }
      if (String(key).includes("Is")) {
        orderInfo.value.OrderInfo[key] = orderInfo.value.OrderInfo[key]
          ? "是"
          : "否";
      }
      if (key.includes("Field")) {
        str += orderInfo.value.OrderInfo[key] + " ";
      }
    }
    orderInfo.value.OrderInfo.nField = str;
    orderInfo.value.Produces.forEach((item) => {
      item.nField = "";
      let str = "";
      for (let key in item) {
        if (String(item[key]).includes("Date(")) {
          console.log("key", key, item[key]);
          item[key] = timeStampFormatter(item[key]);
        }
        if (String(key).includes("Is")) {
          item[key] = item[key] ? "是" : "否";
        }
        if (key.includes("Field")) {
          str += item[key] + " ";
        }
      }
      item.nField = str;
    });
    loadingInfo.value = false;
  }
});
function handleHeaderStyle({ row, col, rowIndex, colIndex }) {
  if (rowIndex !== 0) {
    return { display: "none" };
  }
  return "";
}
function circleNum(num) {
  let circleList = ["①", "②", "③", "④", "⑤", "⑥", "⑧", "⑨", "⑩"];
  return circleList[num - 1];
}
</script>
<style lang="scss" scoped>
.table-separator {
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: bold;
}
.produce-box p:nth-child(n-1) {
  margin-right: 8px;
}
.el-descriptions {
  margin-top: 0;
}
</style>
